<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.wrap {
				width: 500px;
				margin: 0 auto;
			}
			
			.content {
				width: 100%;
			}
			
			.content textarea {
				width: 100%;
				border: 1px solid #eaeaea;
			}
			
			.btn-translate {
				width: 100px;
				height: 32px;
				line-height: 32px;
				background: #25baf4;
				color: #fff;
				border-radius: 4px;
				text-align: center;
				font-size: 14px;
				display: inline-block;
				margin: 20px auto;
			}
			
			.result {
				width: 100%;
				height: 300px;
				border: 1px solid #eaeaea;
				background: #eaeaea;
			}
		</style>
	</head>

	<body>
		<div class="wrap">
			<article class="content">
				<textarea rows="6" placeholder="输入内容" id="translateQueryText"></textarea>
			</article>
			<a href="javascript:;" class="btn-translate" id="J_translate">翻译</a>
			<div class="result" id="result"></div>
		</div>
		<script type="text/javascript" src="http://www.zhongye.net/news_skin/js/jquery-1.9.1.min.js"></script>
		<script>
			$(function() {
				var funList = {
					init: function() {
						$("#J_translate").on("click", function() {
							var $this = $(this),
								$query = $("#translateQueryText").val();

							funList.youdaoTranslate($query);
						});
					},
					youdaoTranslate: function(value) {
						var url = "http://fanyi.youdao.com/openapi.do?keyfrom=zhangjinjin&key=117523596&type=data&doctype=jsonp&callback=youdao&version=1.1&q=" + value;
						$.ajax({
							type: "get",
							url: url,
							dataType: "jsonp",
							jsonp: "callback",
							jsonpCallback: "youdao",
							success: function(data) {
								$("#result").html(data.translation);
							}
						});

					},
				}
				funList.init();

			})
		</script>
	</body>

</html>